<template>
	<div class="app-container">
		<!--弹窗-->
		<el-dialog :title="infoDialog.title" width="650px" :close-on-click-modal="false"
				:visible.sync="infoDialog.visible" @open="handleOpen()" @close="handleClose('infoForm')">
          <div class="switch-item" v-if="infoDialog.option!=1">
              <el-button v-if="!yamlMode" icon="el-icon-d-arrow-right" type="text" @click="handleSwitch()" title="switch to yaml source.">Yaml/Source</el-button>
              <el-button v-else icon="el-icon-d-arrow-left" type="text" @click="handleSwitch()" title="switch to key value format.">Key/Value</el-button>
          </div>
          <el-form :model="infoDialog.info" :rules="rules" ref="infoForm" label-width="65px">
			<div class="keyValue" v-if="!yamlMode">
                <el-form-item label="Key" prop="key">
                    <el-input v-model.trim="infoDialog.info.key" placeholder="Config Key" :disabled="infoDialog.option==1"></el-input>
                </el-form-item>
                <el-form-item label="Value" prop="value">
                    <el-input v-model.trim="infoDialog.info.value"  type="textarea" :rows="6" placeholder="Config Value"></el-input>
                </el-form-item>
            </div>
            <div v-else>
                <el-form-item label="YAML" prop="yamlSource">
                    <div style="height: 300px;">
                        <yaml-editor  v-model="infoDialog.info.yamlSource"/>
                    </div>
                </el-form-item>
            </div>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="handleClose('infoForm')">取消</el-button>
		    <el-button :loading="loading" type="primary" @click="handleSave('infoForm')">确定</el-button>
		  </div>
		</el-dialog>
	</div>
</template>

<script>
    import YamlEditor from '@/components/YamlEditor/Index.vue';

	export default {
		props: {
		  infoDialog: {}
		},
		data() {
            let validateKey = (rule, value, callback) => {
                let reg = new RegExp(/^[a-zA-Z][a-zA-Z0-9_.]*$/);
                if (!reg.test(value)) {
                    callback(new Error('Key必须为字母开头的字符串'));
                } else {
                    callback();
                }
            }
			return {
				loading: false,
                yamlMode: false,
				rules: {
					key: [
						{ required: true, message: '请输入Key' },
                        { validator: validateKey, trigger: 'blur' }
					],
					value: [
						{ required: true, message: '请输入Value' },
					],
					yamlSource: [
						{ required: true, message: '请输入YAML配置' },
					],
				}
			}
		},
		methods: {
            handleSwitch() {
                this.yamlMode = !this.yamlMode;
            },
			handleSave(form) {
				this.$refs[form].validate(valid => {
					if (!valid) {
						return;
					}
					this.loading = true;
					let params = {}
                    let url = {};
                    if (!this.yamlMode) {
                        params.key = this.infoDialog.info.key;
                        params.value = this.infoDialog.info.value;
                        url = this.api.keyValueSave;
                    } else {
                        params.yamlSource = this.infoDialog.info.yamlSource;
                        params.replace = this.infoDialog.info.yamlMode;
                        url = this.api.keyValueYamlSave;
                    }
                    params.projectId = this.infoDialog.projectId;
                    params.env = this.infoDialog.env;
					this.$http.fetch(url, params)
						.then(data => {
							this.$message({ message: '配置保存成功！', type: 'success' });

							this.$emit("update"); //更新父组件
							this.loading = false;

                            if (this.infoDialog.option==1) {
                                this.handleClose(form);
                            }
						}).catch(err=> {
                            this.loading = false;
                        });
				});
			},
            handleOpen() {
                this.yamlMode = this.infoDialog.info.yamlMode;
            },
			handleClose(form) {
				this.infoDialog.visible = false;
				this.infoDialog.info = {yamlSource: ''};
				this.$refs[form].resetFields(); //重置form
			}
		},
        components: { YamlEditor }
	}
</script>
<style scoped>
    .switch-item {
        position: absolute;
        right: 50px;
        margin-top: -30px;
        z-index: 10;
    }
</style>
